<template>
  <div>
    <el-card style="margin: 15px; min-height: 600px">
      <el-table
        v-if="testList.length"
        :data="testList"
        style="width: 100%"
        @cell-click="enterTesting"
      >
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="title" label="名称"> </el-table-column>
        <el-table-column prop="formatStartTime" label="开始时间">
        </el-table-column>
        <el-table-column prop="formatEndTime" label="结束时间">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row, $index }">
            <span v-if="row.isDone == 1" style="color: #f56c6c">已结束</span>
            <span v-if="row.isDone == -1" style="color: #909399">未开始</span>
            <span v-if="row.isDone == 0" style="color: #67c23a">进行中</span>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else description="暂无考试" :image-size="220"></el-empty>
    </el-card>
  </div>
</template>

<script>
import store from "@/store";
import dayjs from "dayjs";
import TestDetail from "@/components/testDetail/index";
export default {
  components: {
    TestDetail,
  },
  data() {
    return {
      testList: [],
      //时间选择器限制时间选
    };
  },

  methods: {
    async getTestList() {
      const res = await this.$API.test.getTestList();
      if (res.code == 200) {
        const list = res.data;
        list.forEach((item) => {
          item.formatStartTime = dayjs(item.startTime).format(
            "YYYY-MM-DD hh:mm:ss"
          );
          item.formatEndTime = dayjs(item.endTime).format(
            "YYYY-MM-DD hh:mm:ss"
          );
        });
        this.testList = list;
      }
    },
    enterTesting(row, column) {
      if (column.label !== "操作") {
        if (Date.now() < row.startTime) {
          return this.$message.warning("考试暂未开始");
        }
        console.log(Date.now(), row.startTime);
        this.$router.push({
          name: "CheckTestList",
          params: {
            id: row.id,
          },
        });
      }
    },
  },
  mounted() {
    this.getTestList();
  },
  computed: {
    isAdminAll() {
      return store.getters.roles ? true : false;
    },
    headers() {
      return {
        Authorization: this.$store.getters.token,
      };
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style scoped>
.line {
  text-align: center;
}
</style>
